<template>
  <div class="index-pay">
    <div class="index-pay-box">
      <span class="index-pay-box-name">近 7 天交易订单额度</span>
      <div class="index-pay-box-charts">
        <ve-line :data="chartData" :legend-visible="false" :settings="chartSettings" height="300px"/>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {

    this.chartSettings = {
      scale: [true, true],
      area: true,
      labelMap: {
        "date": "日期",
        "orderNum": "订单数量"
      },

    }
    return {
      chartData: {
        columns: ['date', "orderNum"],
        rows: [
          {'date': '2-10', "orderNum": 10},
          {'date': '2-11', "orderNum": 12},
          {'date': '2-12', "orderNum": 14},
          {'date': '2-13', "orderNum": 19},
          {'date': '2-14', "orderNum": 20},
          {'date': '2-15', "orderNum": 18},
          {'date': '2-16', "orderNum": 14},
          {'date': '2-17', "orderNum": 45},
          {'date': '2-18', "orderNum": 30},
          {'date': '2-19', "orderNum": 15},
        ]
      }
    }
  },

}
</script>
<style lang="scss" scoped>

.index-pay {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 5px;
  padding: 15px;
  box-sizing: border-box;
}

.index-pay-box {
  width: 100%;
  /* height: 200px; */
  border: 1px solid #E6E6E6;
  position: relative;
  padding: 20px 15px;
  box-sizing: border-box;
}

.index-pay-box-name {
  position: absolute;
  width: 100px;
  height: 30px;
  background: #ffffff;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #000000;
  left: 25px;
  top: -15px;
}

.index-pay-box-select {
  width: 100%;
  height: 40px;
  /* background: burlywood; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.index-pay-box-charts {
  width: 100%;
  height: 300px;
}

</style>
